<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>时钟</title>

		<script src="js/jquery-2.1.0.min.js"></script>

		<style>
			#divBody {
				display: none;
			}
			
			#nyr {
				position: absolute;
				left: 180px;
				bottom: 350px;
				display: none;
			}
			
			#sfm {
				position: absolute;
				left: 700px;
				bottom: 240px;
				display: none;
			}
			
			#a {
				width: 200px;
			}
			
			#xyy {
				opacity: 0.3;
				position: absolute;
				right: 100px;
				bottom: 100px;
				display: none;
			}
			
			#syy {
				opacity: 0.3;
				position: absolute;
				left: 100px;
				bottom: 100px;
				display: none;
			}
			
			#kztz {
				//border: 1px solid red;
				position: absolute;
				bottom: 50px;
				width: 98%;
				height: 200px;
			}
			
			div div div {
				//border: 1px solid black;
				width: 150px;
				height: 100px;
				float: right;
				font-size: 80px;
			}
		</style>

		<script>
			onload = function() {
				//延迟两秒加载主图
				$("#divBody").fadeIn(2000);
				//延迟给时间赋值，延迟展示时间
				setInterval("showTime()", 1000);
				setTimeout("timeToLoad()", 2000);
			}

			function showTime() {
				var time = new Date();
				var yyyy = time.getFullYear();
				var MM = time.getMonth() + 1;
				var dd = time.getDate();
				var HH = time.getHours();
				var mm = time.getMinutes();
				var ss = time.getSeconds();
				
				a.innerHTML = yyyy;
				b.innerHTML = "&nbsp;&nbsp" + MM;
				c.innerHTML = "&nbsp;&nbsp" + dd;
				d.innerHTML = HH + "&nbsp:";
				if(mm < 10) {
					mm = "0" + mm;
				}
				if(ss < 10) {
					ss = "0" + ss;
				}
				e.innerHTML = mm + "&nbsp:";
				f.innerHTML = ss;
				//				v.innerHTML=yyyy+"年"+MM+"月"+dd+"日"+HH+"时"+mm+"分"+ss+"秒";
			}

			function timeToLoad() {
				$("#nyr,#sfm").slideDown(2000);
			}

			// 单击隐藏
			function ycsfm() {
				$("#sfm").slideUp(2000);
			}
			function ycnyr() {
				$("#nyr").slideUp(2000);
			}

			// 控制双击隐藏显示
			var control = true;
			function showTimes() {
				if(control) {
					sfm.style.display = "block";
					nyr.style.display = "block";
					control = false;
				} else {
					ycnyr();
					ycsfm();
					control = true;
				}
			}
			function xstz(){
				$("#syy").fadeIn(1000);
				$("#xyy").fadeIn(1000);
			}
			function yctz(){
				$("#syy").fadeOut(1000);
				$("#xyy").fadeOut(1000);	
			}

			
			// 控制图片跳转
			var count = 1;
			function xtz() {
				$('#divBody').hide();
				$("#tu").attr("src", "img/背景图1/back (" + count + ").jpg");
				$("#divBody").fadeIn(2000);
				
				count++;
				if(count == 21) {
					count = 1;
				}
			}

			function stz() {
				$('#divBody').hide();
				$("#tu").attr("src", "img/背景图1/back (" + count + ").jpg");
				$("#divBody").fadeIn(2000);
				
				count--;
				if(count == 0) {
					count = 1;
				}
			}
		</script>
		


	</head>

	<body>

		<div id="divBody" ondblclick="showTimes()" >
			<img id="tu" src="img/背景图1/back (21).jpg" width="100%" />
			<div id="sfm" onclick="ycsfm()" style="border-style: solid; border-color: red;">
				<div id="f"></div>
				<div id="e"></div>
				<div id="d"></div>
			</div>

			<div id="nyr" onclick="ycnyr()" style="border-style: solid; border-color: red;">
				<div id="c"></div>
				<div id="b"></div>
				<div id="a"></div>
			</div>
			
			<div id="kztz" onmouseover="xstz()" onmouseout="yctz()"></div>
			<img id=xyy src="img/xtz.jpg" width="50px" height="50px" onclick="xyy()">
			<img id=syy src="img/stz.jpg" width="50px" height="50px" onclick="syy()">

			<span></span>
		</div>
	</body>

</html>